<template>
  <div ref="lineChart" class="div-zhe"></div>
</template>

<script>
// 引入 ECharts 主模块
import * as echarts from 'echarts';

export default {
  name: 'LineChart',

  mounted() {
    // 初始化echarts实例
    let myChart = echarts.init(this.$refs.lineChart);

    // 定义图表的配置项和数据
    let option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    // 如果你需要处理组件销毁时的逻辑（例如，销毁ECharts实例），
    // 可以在beforeDestroy钩子中添加相应的代码。
    // 但在这个简单的例子中，我们假设组件会一直保持挂载状态。
  }
  // 如果你需要处理组件销毁时的逻辑，可以取消注释以下部分：
  // beforeDestroy() {
  //   if (this.myChart && this.myChart.dispose) {
  //     this.myChart.dispose();
  //   }
  // }
  // 注意：上面的beforeDestroy钩子中的this.myChart应该是你在mounted钩子中定义的myChart实例。
  // 如果你打算在beforeDestroy中使用它，你应该在data中声明它或者在mounted钩子中将其添加到this上。
  // 例如：
  // data() {
  //   return {
  //     myChart: null
  //   };
  // },
  // mounted() {
  //   this.myChart = echarts.init(this.$refs.lineChart);
  //   // ... 其他代码 ...
  // }
}
</script>

<style scoped>
/* 你可以在这里添加一些CSS样式 */
.div-zhe {
  text-align: center;
  width: 600px;
  height: 400px;
}
</style>
